<template>
  <!--新增/编辑-->
  <el-dialog
    :close-on-click-modal="false"
    :title="title2"
    :beforeClose="handleClose2"
    :visible.sync="dialogVisible2"
    width="500px">
    <el-form :model="form" size="mini" label-width="120px" :rules="rules" ref="form">
      <el-form-item label="客户名称：">
        {{form.customerName}}
      </el-form-item>
      <el-form-item label="产品线：">
        <el-select v-model="form.goodsLineId" @change="changeGoodsId">
          <el-option :label="item.cddValue" v-for="item in goodsLineList" :value="item.cddId" :key="item.cddId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="牌号：">
          <el-select v-model="form.goodsSn" filterable placeholder="请选择" clearable>
            <el-option
              v-for="item in goodsList"
              :key="item.kingId"
              :label="item.goodsSn"
              :value="item.goodsSn">
            </el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="月使用量：">
        <el-input v-model="form.cycleNumber" style="width:120px;"></el-input><span style="padding-left:5px;">吨</span>
      </el-form-item>

      <el-form-item label="采购周期：">
        <el-input  v-model="form.cycleDays"></el-input>
      </el-form-item>

      <el-form-item label="供应商：">
        <el-input v-model="form.brandName"></el-input>
      </el-form-item>

      <el-form-item label="备注：">
        <el-input v-model="form.remark"></el-input>
      </el-form-item>

    </el-form>
    <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose2">取 消</el-button>
          <el-button type="primary" @click="handleConfirm2" :loading="btnLoading2">确 定</el-button>
      </span>
  </el-dialog>
</template>
<script>
import {getCustomerSetting,orderGoodsList} from '@/api/partner'
import {developAddCustomerUseGoods} from '@/api/company'
import {validatePhone} from '@/utils/validate';
import {formatDate} from '@/utils/date';
import store from '@/store'
import { mapGetters } from 'vuex'

const defaultForm = {
  goodsLineId:'',
  goodsSn:'',
  cycleNumber:'',
  cycleDays:'',
  brandName:'',
  remark:'',
};
export default {
  name: "index",
  data(){

    return {
      dialogVisible2:false,
      title2:'',
      btnLoading2:false,
      form:JSON.parse(JSON.stringify(defaultForm)),
      rules:{

      },
      goodsLineList:[],
      goodsList:[],
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
  },
  components : {

  },
  created() {

  },
  filters: {

  },
  methods:{
    //显示
    showPop(item,type){
      this.dialogVisible2 = true;
      this.popType = type;
      this.title2 = type == 'add' ? '新增使用材料' : '编辑使用材料';
      this.form = JSON.parse(JSON.stringify(defaultForm));
      if(type == 'edit'){
        this.form = JSON.parse(JSON.stringify(item));
      }
      this.form.customerName = item.customerName;
      this.form.customerId = item.customerId;
      this.getCustomerSettingList();
      orderGoodsList().then((res)=>{
        this.goodsList = res.list
      })
    },

    changeGoodsId(){
      this.form.goodsSn = '';
      this.goodsList = [];
      this.getGoodsList();
    },

    getGoodsList(){
      orderGoodsList({goodsLineId:this.form.goodsLineId}).then((res)=>{
        this.goodsList = res.list
      })
    },

    //关闭弹窗
    handleClose2(){
      this.$refs.form.clearValidate();
      this.dialogVisible2 = false;
      this.btnLoading2 = false;
    },

    //提交
    handleConfirm2(){
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.btnLoading2 = true;
          let data = JSON.parse(JSON.stringify(this.form));
          developAddCustomerUseGoods(data).then((res)=>{
            this.btnLoading2 = false;
            this.handleClose2();
            this.$emit('getList');
          }).catch(()=>{
            this.btnLoading2 = false;
          })
        }
      })
    },


    //获取客户配置
    getCustomerSettingList(){
      getCustomerSetting().then((res)=>{
        res.forEach((el)=>{
         if(el.cdtCode == 'goods_line'){
            this.goodsLineList = el.data
          }
        });
      })
    },
  },
}
</script>

<style  lang="scss">
.avatar-uploader{
  margin-bottom:10px;
  display: inline-block;
  width:80px;
  height:80px;
  border:1px solid #DCDFE6;
  text-align: center;
  line-height: 80px;
  vertical-align: middle;
}
</style>
